<template>
  <div class="management-container">
    <!-- 引入导航栏组件 -->
    <nav-bar />

    <div class="main-content">
      <h1>活动管理</h1>
      
      <!-- 添加按钮 -->
      <div class="management-actions">
        <button @click="createActivity">新增活动</button>
      </div>

      <!-- 显示活动列表 -->
      <table class="activities-table" v-if="activities.length > 0">
        <thead>
          <tr>
            <th>Title</th>
            <th>Date</th>
            <th>Location</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="activity in activities" :key="activity.id">
            <td>{{ activity.title }}</td>
            <td>{{ activity.date }}</td>
            <td>{{ activity.location }}</td>
            <td>
              <button @click="editActivity(activity)">编辑</button>
              <button @click="deleteActivity(activity.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <p v-else>暂无活动数据</p>

      <!-- 模态框 -->
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <h2>{{ isEditing ? '编辑活动' : '新增活动' }}</h2>
          <form @submit.prevent="saveActivity">
            <div class="form-group">
              <label>Title:</label>
              <input type="text" v-model="currentActivity.title" required />
            </div>
            <div class="form-group">
              <label>Description:</label>
              <textarea v-model="currentActivity.description" required></textarea>
            </div>
            <div class="form-group">
              <label>Date:</label>
              <input type="date" v-model="currentActivity.date" required />
            </div>
            <div class="form-group">
              <label>Location:</label>
              <input type="text" v-model="currentActivity.location" required />
            </div>
            <div class="modal-actions">
              <button type="submit">保存</button>
              <button @click="closeModal">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'; // 导入导航栏组件

export default {
  components: {
    NavBar // 注册导航栏组件
  },
  data() {
    const storedActivities = localStorage.getItem('activities');
    let activities = [];

    if (storedActivities) {
      try {
        activities = JSON.parse(storedActivities);
      } catch (e) {
        // 解析失败时使用默认数据
        import('@/data/activities.js').then(module => {
          activities = module.default;
        });
      }
    } else {
      import('@/data/activities.js').then(module => {
        activities = module.default;
      });
    }
    
    return {
      activities,
      showModal: false,
      isEditing: false,
      currentActivity: {
        id: null,
        title: '',
        description: '',
        date: '',
        location: ''
      }
    };
  },
  methods: {
    createActivity() {
      this.isEditing = false;
      this.currentActivity = {
        id: null,
        title: '',
        description: '',
        date: '',
        location: ''
      };
      this.showModal = true;
    },
    editActivity(activity) {
      this.isEditing = true;
      this.currentActivity = { ...activity };
      this.showModal = true;
    },
    saveActivity() {
      if (this.isEditing) {
        const index = this.activities.findIndex(a => a.id === this.currentActivity.id);
        if (index !== -1) {
          this.activities.splice(index, 1, this.currentActivity);
        }
      } else {
        const newId = this.activities.length > 0 ? Math.max(...this.activities.map(a => a.id)) + 1 : 1;
        this.currentActivity.id = newId;
        this.activities.push({ ...this.currentActivity });
      }

      // 更新 localStorage 中的活动数据
      localStorage.setItem('activities', JSON.stringify(this.activities));
      this.closeModal();
    },
    deleteActivity(id) {
      const index = this.activities.findIndex(a => a.id === id);
      if (index !== -1) {
        this.activities.splice(index, 1);
        // 更新 localStorage 中的活动数据
        localStorage.setItem('activities', JSON.stringify(this.activities));
      }
    },
    closeModal() {
      this.showModal = false;
    }
  }
};
</script>

<style scoped>
.management-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.management-actions {
  margin-bottom: 20px;
}

.management-actions button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.management-actions button:hover {
  background-color: #45a049;
}

.activities-table {
  width: 100%;
  border-collapse: collapse;
}

.activities-table th,
.activities-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.activities-table tr:hover {
  background-color: #f1f1f1;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
}

.modal-content h2 {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
}

.modal-actions button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.modal-actions button:hover {
  background-color: #45a049;
}

</style>